<template>
	<!-- 收付款记录 -->
	<view class="shell_wp">
		<view class="bg">
			<view class="tit_box" :class="{'fixed':topStatus}">
				<view class="img_box" @click="$navBack()">
					<image src="/pages/business/static/c_refund_arror.png" mode=""></image>
				</view>
				<text>订单补贴明细</text>
			</view>
			<view class="detail_msg" :class="{'detail_msg2':topStatus}">
				<view class="top">
					<text class="color_1">当前订单总计已补贴：</text>
					<view class="color_1">{{orderDetails.sendsupmoney||0}}<text style="font-size: 24rpx;">（米券）</text>
					</view>
				</view>
				<view class="d_center">
					<view class="min_del">
						<text class="color_1">米券支付（券）</text>
						<view class="color_1">{{orderDetails.micredit||0}}</view>
					</view>
					<view class="min_del">
						<text class="color_1">现金支付（元）</text>
						<view class="color_1">{{orderDetails.pay_money||0}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="transaction_details">
			<view v-if="list.length>0">
				<view class="td_box flex" v-for="item,i in list" :key="i">
					<view class="left flex">
						<image src="/pages/business/static/c_logo.png" mode=""></image>
						<view class="order_tit">
							<text class="color_3">订单补贴</text>
							<view class="color_2">补贴至账户米券</view>
							<view class="color_2">{{item.createtime||0}}</view>
						</view>
					</view>
					<view class="right">
						<view class="color_4">+{{item.money||0}}</view>
						<!-- <text class="color_4">累计补贴{{orderDetails.sendsupmoney}}</text> -->
					</view>
				</view>
			</view>
			<view class="none_data" v-else>
				<image src="/pages/business/static/c_nonedata.png" mode=""></image>
				<view v-if="!isErr">即将开始补贴，请耐心等待</view>
				<view v-else>数据统计中，敬请期待！</view>
			</view>
		</view>
		<view class="loading_message">
			<image v-if="isloading&&list.length>0" src="../../static/business/loading.gif"></image>
			<view v-if="isempty&&list.length!=0">—— 没有更多了 ——</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				topStatus: false,
				page: 0,
				list: [],
				isempty: false,
				isloading: false,
				headInfo: [],
				statusOpen: false,
				chooseType: 0,
				orderDetails: {},
				id: '',
				isErr: false
			}
		},
		onReachBottom() {
			this.getilist();
		},
		onLoad(options) {
			this.id = options.id
			this.getilist();
		},
		onPageScroll(e) {
			if (e.scrollTop > 0) {
				this.topStatus = true;
			} else {
				this.topStatus = false;
			}
		},
		methods: {
			getilist() {
				this.isErr = false
				this.page += 1;
				this.isloading = true;
				this.$axios('transLog/incomeDetail', 'POST', 'bonus', {
					page: this.page,
					id: this.id
				}).then(res => {
					this.isloading = false;
					if (res.data.code == 200) {
						let length = res.data.data.list.length;
						this.orderDetails = res.data.data.order
						this.list = this.list.concat(res.data.data.list);
						this.isempty = length <= 0 ? true : false;
					}
					if(res.statusCode=='404'){
						this.isErr = true
					}
				}, err => {
					this.isErr = true
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	// page {
	// 	background-color: #fdf8ff;
	// }


	.time_box {
		padding: 30rpx;
		border-radius: 24rpx 24rpx 0px 0px;
		background-color: #fff;

		.tit {
			color: #13001E;
			font-size: 28rpx;
			font-weight: bold;
			line-height: 40rpx;
		}

		.datetime {
			margin: 20rpx auto;
		}

		.btn_box {
			justify-content: space-between;
			font-size: 28rpx;
			text-align: center;
			font-weight: bold;
			line-height: 80rpx;
			margin-top: 40rpx;

			.clear {
				border-radius: 90rpx;
				width: 238rpx;
				height: 80rpx;
				border: 2rpx solid #CCCACD;
			}

			.ready {
				border-radius: 90rpx;
				width: 440rpx;
				height: 80rpx;
				background: linear-gradient(96deg, #FF38E5 0%, #8813E2 61%);
				color: #fff;
			}
		}
	}

	.flex {
		display: flex;
	}

	.color_1 {
		color: #fff;
	}

	.color_2 {
		color: #999999;
	}

	.color_3 {
		color: #13001E;
	}

	.color_4 {
		color: #9A1FE8;
	}


	.transaction_details {
		width: 100%;
		// margin: 20rpx auto;
		margin-top: -150rpx;
		background-color: #fff;

		.td_box {
			width: 95%;
			margin: 0 auto;
			padding: 25rpx;
			justify-content: space-between;
			border-bottom: 2rpx solid #f5f5f5;

			.left {
				image {
					width: 80rpx;
					height: 80rpx;
				}

				.order_tit {
					margin-left: 20rpx;

					text {
						font-size: 28rpx;
						font-weight: bold;
					}

					view {
						font-size: 23rpx;
						margin-top: 5rpx;
					}
				}
			}

			.right {
				text-align: right;

				view {
					font-size: 28rpx;
					font-weight: bold;
				}

				text {
					font-size: 23rpx;
				}
			}
		}
	}

	.bg {
		width: 100%;
		height: 600rpx;
		background-image: url('/pages/business/static/c_bg.png');
		background-size: 100% 100%;
		background-position: center center;

		.detail_msg {
			width: 95%;
			height: 290rpx;
			box-sizing: border-box;
			// border: 2rpx solid;
			margin: 10rpx auto;
			border-radius: 16rpx;
			position: relative;
			padding: 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;



			.dmt_image {
				position: absolute;
				right: 0;
				top: -70rpx;
				width: 240rpx;
				height: 240rpx;
			}

			.btom {
				font-size: 24rpx;

				// .bt_tit{
				// 	font-size: 24rpx;
				// }
				.update_msg {

					margin-left: 20rpx;

					text {
						margin-right: 20rpx;
					}
				}

				.choose_time {
					color: #9A1FE8;
					font-weight: bold;
				}
			}

			.top {
				text {
					font-size: 28rpx;
				}

				view {
					font-size: 60rpx;
					font-weight: bold;
				}
			}

			.d_center {
				display: flex;
				// justify-content: space-between;

				.min_del {
					width: 50%;

					text {
						font-size: 24rpx;
					}

					view {
						font-size: 36rpx;
						font-weight: bold;
					}
				}

				.line {
					width: 2rpx;
					height: 84rpx;
				}
			}
		}

		.tit_box {
			width: 100%;
			// height: 176rpx;
			padding: 100rpx 20rpx 20rpx;
			// background-color: #B62BF0;
			// padding: 40rpx 20rpx;
			text-align: center;
			display: flex;

			.img_box {
				width: 40rpx;
				height: 40rpx;
				// background-color: pink;

				// margin-top: 70rpx;
				image {
					width: 18rpx;
					height: 34rpx;
				}
			}

			text {
				width: 240rpx;
				text-align: center;
				position: absolute;
				left: calc(50% - 100rpx);
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: bold;
				// display: inline-block;
				// margin-top: 70rpx;
			}
		}
	}

	.fixed {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background-color: #9A1FE8;
	}

	.none_line {
		width: 100%;
		height: 2rpx;
	}

	.loading_message image {
		display: block;
		margin: 0 auto;
		height: 60upx;
		width: 60upx;
	}

	.loading_message view {
		text-align: center;
		color: #9E9E9E;
	}

	.none_data {
		padding-top: 200rpx;
	}

	.none_data view {
		color: #13001E;
		font-size: 28rpx;
		font-weight: normal;
		margin-top: 20rpx;
	}

	.none_data image {
		width: 240rpx;
		height: 240rpx;
	}

	.detail_msg2 {
		top: 170rpx;
	}
</style>